<template>
    <n-slider
        :value="value"
        :min=min
        :max=max
        :step=step
        :marks="marks"
        :on-update:value="onchange"
    />
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import debouncer from "../../base/debouncer"


const props = defineProps<{
    value: number,
    min?: number ,
    max?: number ,
    step?: number ,
    delay?: number ,
    marks?: { [markValue: number]: string } ,
}>()

const emit = defineEmits(["update:value", 'on-change', 'on-input'])

let changeDebouncer = debouncer((value:number)=>{
    emit('update:value', value)
}, props.delay||100)

function onchange(value: any) {
    emit('on-change', value)
    changeDebouncer(value)
}

</script>